<template>
    <div :class="$style.container">
        <div :class="$style.box">
            <template v-for="(key, index) in keys" :key="index">
                <div :class="[$style.cell]" @click="selectIcon(key, index)">
                    <div :class="[$style.wrap, current == index ? $style.selected : '']">
                        <component :is="Alls[key]"></component>
                    </div>
                </div>
            </template>
        </div>
    </div>
</template>
<script lang="ts" setup>
    import * as Alls from "@remixicon/vue";
    import { ref } from "vue";

    const emit = defineEmits<{
        (e : 'select', icon : string) : void;
    }>()

    const keys =  Object.keys(Alls)
    const current = ref(-1)

    function selectIcon(key:string, index:number) {
        current.value = index
        emit('select', key)
    }
</script>

<style lang="scss" module>
    .container{
        width: 800px;
        max-height: 800px;
        overflow-y: auto
    }
    .box{
        display: grid;
        grid-template-columns: repeat(10, 1fr);
        gap: 10px;
        

        .cell{
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;

            .wrap{
                width: 40px;
                height: 40px;
                display: flex;
                align-items: center;
                justify-content: center;
                border-radius: 50%;

                &.selected{
                    background-color: #2D99FF;
                    color: #fff;
                }
            }

            
        }
    }
</style>